const 名称 = '正方形';


function 绘图(环境, 边长, x, y, 颜色) {
    环境.fillStyle = 颜色;
    环境.fillRect(x, y, 边长, 边长);

    return {
        边长: 边长,
        x: x,
        y, y,
        颜色: 颜色,
    };
}


function 随机数(最小, 最大) {
    let 数字 = Math.floor(Math.random() * (最大 - 最小)) + 最小;
    return 数字;
}


function 报告面积(边长, 列表识别码) {
    let 列表条目 = document.createElement('li');
    列表条目.textContent = `${名称} 面积是 ${边长 * 边长} px²`;

    let 列表 = document.getElementById(列表识别码);
    列表.appendChild(列表条目);
}


function 报告周长(边长, 列表识别码) {
    let 列表条目 = document.createElement('li');
    列表条目.textContent = `${名称} 周长是 ${边长 * 4} px`;

    let 列表 = document.getElementById(列表识别码);
    列表.appendChild(列表条目);
}


function 随机正方形(环境) {
    let 颜色1 = 随机数(0, 255);
    let 颜色2 = 随机数(0, 255);
    let 颜色3 = 随机数(0, 255);
    let 颜色 = `rgb(${颜色1}, ${颜色2}, ${颜色3})`;
    环境.fillStyle = 颜色;

    let 边长 = 随机数(10, 100);
    let x = 随机数(0, 480 - 边长);
    let y = 随机数(0, 320 - 边长);

    环境.fillRect(x, y, 边长, 边长);
    console.log(x, y, 边长);

    return {
        边长: 边长,
        x: x,
        y: y,
        颜色: 颜色,
    };
}


export {名称, 绘图, 报告面积, 报告周长};
export default 随机正方形;
